<template>
  <div id="userRegisterView">
    <h2>用户注册</h2>
    <a-form
      :model="form"
      @submit="handleSubmit"
      :rules="rules"
      label-align="left"
      auto-label-width
      style="max-width: 480px; margin: 40px auto"
    >
      <a-form-item field="userName" label="昵称" required>
        <a-input v-model="form.userName" placeholder="请输入昵称(2-12位)" />
      </a-form-item>
      <a-form-item field="userAccount" label="账号" required>
        <a-input v-model="form.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item field="userPassword" label="密码" required>
        <a-input-password
          v-model="form.userPassword"
          placeholder="至少8位字符"
        />
      </a-form-item>
      <a-form-item field="checkPassword" label="确认密码" required>
        <a-input-password
          v-model="form.checkPassword"
          placeholder="请再次输入密码"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          html-type="submit"
          type="primary"
          style="width: 300px; margin: 20px auto"
          :loading="loading"
          >注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
  <div style="text-align: center">
    已有账号？
    <a-link @click="router.push('/user/login')">登录</a-link>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserControllerService } from "../../../generated/user";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const form = reactive({
  userName: "",
  userAccount: "",
  userPassword: "",
  checkPassword: "",
});

const router = useRouter();
const store = useStore();
const loading = ref(false);

// 表单验证规则
const rules = {
  userName: [
    { required: true, message: "昵称不能为空" },
    { minLength: 2, message: "昵称长度不能少于2位" },
    { maxLength: 12, message: "昵称长度不能超过12位" },
  ],
  userAccount: [
    { required: true, message: "账号不能为空" },
    { minLength: 4, message: "账号长度不能少于4位" },
    { maxLength: 16, message: "账号长度不能超过16位" },
  ],
  userPassword: [
    { required: true, message: "密码不能为空" },
    { minLength: 8, message: "密码长度不能少于8位" },
  ],
};

const handleSubmit = async () => {
  if (form.userPassword !== form.checkPassword) {
    message.error("两次输入的密码不一致");
    return;
  }

  loading.value = true;
  try {
    const res = await UserControllerService.userRegisterUsingPost({
      userName: form.userName,
      userAccount: form.userAccount,
      userPassword: form.userPassword,
      checkPassword: form.checkPassword,
    });

    if (res.code === 0) {
      message.success("注册成功");
      // 自动登录
      const loginRes = await UserControllerService.userLoginUsingPost({
        userAccount: form.userAccount,
        userPassword: form.userPassword,
      });
      if (loginRes.code === 0) {
        await store.dispatch("user/getLoginUser");
        router.push("/");
      }
    } else {
      message.error(`注册失败: ${res.message}`);
    }
  } catch (e) {
    message.error("请求失败，请检查网络");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
#userRegisterView {
  margin: 0 auto;
}
</style>
